<template>
  <div class="parameter-product">
    <div class="flex justify-center mb-6">
      <span class="text-xl font-bold text-gray-800">参数设置</span>
    </div>
    <!-- 条件查询区域 -->
    <div class="search-container mb-4">
      <el-form :inline="true" :model="searchForm" class="search-form" style="margin-left: 20px;">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="商品类别">
              <el-input v-model="searchForm.categoryName" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品编码">
              <el-input v-model="searchForm.code" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品名称">
              <el-input v-model="searchForm.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="库存设置">
              <el-select
                v-model="searchForm.setStatus"
                placeholder="全部"
              >
                <el-option label="全部" :value="0" />
                <el-option label="未设置" :value="1" />
                <el-option label="已设置" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3" class="form-actions">
            <el-form-item>
              <el-button type="primary" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" prop="serial" label="序号" width="180" />
      <el-table-column prop="categoryName" label="商品类别" width="180" />
      <el-table-column prop="code" label="商品编码" />
      <el-table-column prop="name" label="商品名称" />
      <el-table-column prop="spec" label="商品规格" />
      <el-table-column prop="unit" label="计量单位" />
      <el-table-column label="库存设置" align="center">
        <template #default="scope">
          <span v-if="scope.row.setStatus === 1" class="clickable text-warning" @click="handleOpenDialog(scope.row)">未设置</span>
          <span v-else-if="scope.row.setStatus === 2" class="clickable text-warning" @click="handleOpenDialog(scope.row)">已设置</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 修改为v-model绑定方式，更符合Vue3规范 -->
    <StockSettingDialog 
      v-model="dialogVisible" 
      :current-row="currentRow"
      @on-save="handleSaveSuccess"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { queryProduct } from '@/api/parameter/product.js'
import StockSettingDialog from './StockSettingDialog.vue'

const page = ref(1)
const pageSize = ref(5)
const totalCount = ref(0)
const tableData = ref([])
const dialogVisible = ref(false)
const currentRow = ref(null)

// 查询表单参数
const searchForm = ref({
  categoryName: '',
  code: '',
  name: '',
  setStatus: 0
})

async function init() {
  try {
    let params = {
      type: 2,
      page: page.value,
      pageSize: pageSize.value,
      categoryName: searchForm.value.categoryName,
      code: searchForm.value.code,
      name: searchForm.value.name,
      setStatus: searchForm.value.setStatus
    }
    let res = await queryProduct(params)
    if (res.code === 200) {
      tableData.value = res.data.list
      totalCount.value = res.data.total
    } else {
      console.error('获取数据失败:', res)
    }
  } catch (error) {
    console.error('接口请求错误:', error)
  }
}

onMounted(() => {
  init()
})

const handleQuery = () => {
  page.value = 1
  init()
}
const handleSizeChange = newSize => {
  pageSize.value = newSize
  page.value = 1
  init()
}
const handleCurrentChange = newPage => {
  page.value = newPage
  init()
}

const handleOpenDialog = row => {
  currentRow.value = row
  dialogVisible.value = true
}

const handleSaveSuccess = formData => {
  if (currentRow.value) {
    const index = tableData.value.findIndex(item => item.serial === currentRow.value.serial)
    if (index !== -1) {
      tableData.value[index].setStatus = 2
    }
  }
  dialogVisible.value = false
}

</script>

<style scoped>
.clickable {
  cursor: pointer;
  color: #409eff;
}
.demo-pagination-block {
  /* 启用 flex 布局 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 可选：垂直居中（如果需要） */
  align-items: center;
  /* 可选：设置高度（配合垂直居中） */
  height: 60px;
  margin: 20px 0;
}
</style>